<template lang="pug">
  .app
    a-layout(style={height: '100%'})
      a-layout-header.app-title
        a-page-header(:sub-title="slogan")
          template(slot="title")
            router-link(style={color: 'black'} to="/")
              a-space(size="small")
                img(alt="title-icon" :src="icon" style={width: '32px'})
                | {{ title }}
          template(slot="tags")
            a-tag(color="gray") {{ version }}
          template(slot="extra")
            a-space.more(:size="'middle'")
              a-tooltip(title="开源")
                a-icon(type="github" @click="openUrl('https://github.com/LanyuanXiaoyao-Studio/SearchX')")
              a-tooltip(title="邮箱")
                a-icon(theme="filled" type="mail" @click="openUrl('mailto:lanyuanxiaoyao@email.com?subject=%E6%84%8F%E8%A7%81%E5%8F%8D%E9%A6%88&body=(%E8%AF%B7%E8%AF%A6%E7%BB%86%E6%8F%8F%E8%BF%B0%E4%BD%A0%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98)')")
              a-tooltip(title="反馈")
                a-icon(theme="filled" type="question-circle" @click="openUrl('https://github.com/LanyuanXiaoyao-Studio/SearchX/issues')")
      a-layout(style={marginTop: '64px'})
        a-layout-sider
          a-menu.sider-menu(:selectedKeys="defaultSelectedKeys" mode="inline")
            a-menu-item(key="/")
              router-link(to="/")
                a-icon(type="home")
                | 首页
            a-menu-item(key="/settings")
              router-link(to="/settings")
                a-icon(type="setting")
                | 设置
            a-menu-item(key="/subscription")
              router-link(to="/subscription")
                a-icon(type="cloud")
                | 订阅
            a-menu-item(key="/merge-search" disabled)
              router-link(to="/merge-search")
                a-icon(type="search")
                | 搜索
                DevelopmentTag
            a-menu-divider
            a-menu-item-group(v-for="(category, key) in categories" :key="key")
              span(slot="title") {{ key }}
              a-menu-item(v-for="site in category" :key="`/site/${site.code}`")
                router-link(:to="`/site/${site.code}`")
                  img.site-icon(:alt="site.name" :src="site.icon")
                  | {{ site.name }}
        a-layout#view-content-layout.content
          a-back-top(:target="layoutDom")
          a-layout-content
            a-config-provider(:locale="zh")
              transition
                router-view(:key="generateViewKey()")
</template>

<script>
import squirrel from '@/squirrel'
import zh from 'ant-design-vue/es/locale/zh_CN'
import {mapGetters} from 'vuex'
import {isEmpty, isNil} from 'licia';
import DevelopmentTag from '@/components/DevelopmentTag'

const isDevelopment = process.env.NODE_ENV !== 'production'

export default {
  name: 'App',
  components: {
    DevelopmentTag,
  },
  data() {
    return {
      zh,
      icon: ''
    }
  },
  mounted() {
    if (!isDevelopment) {
      squirrel.services.checkUpdate()
              .then(result => {
                if (result.cmp < 0) {
                  this.$notification['warning']({
                    duration: null,
                    message: '发现新版本',
                    description: `当前版本: ${result.current} → 最新版本: ${result.remote}`,
                    btn: h => {
                      return h(
                          'a-button',
                          {
                            props: {
                              type: 'link',
                              size: 'small',
                            },
                            on: {
                              click: () => {
                                window.openInExternal('https://github.com/LanyuanXiaoyao-Studio/SearchX/releases/latest')
                              }
                            }
                          },
                          '前往下载'
                      )
                    }
                  })
                }
              })
              .catch(error => {
                this.$message.error(`无法检查更新: ${error}`)
              })
    }
  },
  computed: {
    ...mapGetters([
      'currentUrl',
      'mode',
      'version',
      'sites',
      'categories',
    ]),
    defaultSelectedKeys() {
      return [this.currentUrl]
    },
    title() {
      let title = process.env.VUE_APP_TITLE
      return isEmpty(title) ? 'SearchX' : title
    },
    slogan() {
      let slogan = process.env.VUE_APP_SLOGAN
      return isEmpty(slogan) ? '' : slogan
    }
  },
  methods: {
    openUrl(url) {
      if (!isNil(url) && !isEmpty(url)) {
        window.openInExternal(url)
      }
    },
    generateViewKey() {
      return this.$route.name ? `${this.$route.name}${new Date().getTime()}` : `${this.$route}${new Date().getTime()}`
    },
    layoutDom() {
      return document.getElementById('view-content-layout')
    }
  }
}
</script>

<style
    lang="stylus"
    scoped
>
.app
  height 100%

  .app-title
    -webkit-app-region: drag
    background-color white
    box-shadow: 0 0 5px #666666
    height 64px
    padding 0
    position fixed
    width 100%
    z-index 1

    .more
      color gray
      cursor pointer
      font-size 1.3rem

  .sider-menu
    height 100%
    overflow-y auto
    overflow-x hidden

  .site-icon
    margin-right 10px
    width 20px

  .content
    padding 15px

    .ant-back-top
      bottom: 50px
      right 45px
</style>
